<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width: 800px;
				margin: 0 auto;
				height: 400px;
				text-align: center;
			}
			.switchText{
				font-size: 24px;
				font-weight: normal;
				color: #282828;
				transition: color .5s ease;
				-moz-transition: color .5s ease;	
				-webkit-transition: color .5s ease;	
				-o-transition: color .5s ease;
			}
			.switchText.active{
				transition: color .5s ease;
				-moz-transition: color .5s ease;	
				-webkit-transition: color .5s ease;	
				-o-transition: color .5s ease;
				color: blue;
			}
			.line{
				display: block;
				margin: 20px auto 0;
				height: 2px;
				transition: width .5s ease;
				-moz-transition: width .5s ease;	
				-webkit-transition: width .5s ease;	
				-o-transition: width .5s ease;
				background-color: blue;
				width: 0;
			}
			.line.active{
				background-color: blue;
				transition: width .5s ease;
				-moz-transition: width .5s ease;	
				-webkit-transition: width .5s ease;	
				-o-transition: width .5s ease;
				width: 85px;
			}
			.switchStyle{
				margin-top: 15px;
				border-radius: 4px;
				border: 1px solid #d2d2d2;
				color: #000;
				font-size: 16px;
				height: 30px;
				line-height: 30px;
				background-color: #fff;
				outline: none;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="switchAre">
				<h3 class="switchText">前端学院</h3>
				<span class="line"></span>
			</div>
			<input type="button" value="切换样式" class="switchStyle"/>
		</div>
	</body>
	<script>
		window.onload = function(){
			var box = document.getElementById('box'),
				Btn = box.getElementsByClassName('switchStyle')[0],//点击按钮
				switchA = box.getElementsByClassName('switchAre')[0],//改变区域
				title = switchA.getElementsByClassName('switchText')[0],//改变标题
				line = switchA.getElementsByClassName('line')[0],//线
				num = 0;//点击次数
			Btn.onclick = function(){
				//获取class的值
				var tClassVal = title.getAttribute('class'),
					lClassVal = line.getAttribute('class');
				if(num == 0){
					//类名以数组形式连接
					tClassVal = tClassVal.concat(' active');
					lClassVal = lClassVal.concat(' active');
					//设置class的值
					title.setAttribute('class',tClassVal);
					line.setAttribute('class',lClassVal);
					num = 1;
				}else{
					//删除添加的active类名
					tClassVal = tClassVal.replace('active','');
					lClassVal = lClassVal.replace('active','');
					//class重新赋值
					title.setAttribute('class',tClassVal);
					line.setAttribute('class',lClassVal);
					num = 0;
				}
				
			}
		}
	</script>
</html>
